<!DOCTYPE html > 
<html>
<head>
  <meta charset="utf-8">
<script src="../../js/Verification.js"></script>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>商品管理</title>
	<link rel="stylesheet" href="../../layui/css/layui.css" media="all">
  <style>
    body{margin: 10px;}
    .demo-carousel{height: 300px; line-height: 300px; text-align: center;}
    .demoTable{
    	z-index: 10px;
    }
    #addReload{
    	position:absolute;
    	top:0%;
    	z-index: 100px;
    	background: rgb(0,0,0,0.9);
    	width:100%;
    	height: 200%;
    	display: none;
    }
    #addOperation{
    	position: absolute;
    	left: 30%;
    	top: 0%;
    	width: 55%;
    	background: white;
    	
    	
    }
     #updateReload{
    	position:absolute;
    	top:0%;
    	z-index: 100px;
    	background: rgb(0,0,0,0.9);
    	width:100%;
    	height: 200%;
    	display: none;
    }
    #updateOperation{
    	position: absolute;
    	left: 30%;
    	top: 0%;
    	width: 55%;
    	background: white;
    	
    	
    }
  </style>
</head>
<body>
	<div class="demoTable">
	  搜索角色名称：
	  <div class="layui-inline">
	    <input class="layui-input" name="id" id="demoReload" autocomplete="off">
	  </div>
	  <button class="layui-btn" data-type="reload">搜索</button>
	  <button class="layui-btn" id="imgAdd" data-type="add">增加</button>
	  <table class="layui-hide" id="role" lay-filter="demo"></table>
	</div>
	
 	<div id="addReload">
 		<div id="addOperation">
		 	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
			  <legend>角色增加列表</legend>
			</fieldset>
			<form class="layui-form" action="../../role/addRole.action" method="post"  >
			
			  <div class="layui-form-item">
			    <label class="layui-form-label">角色名称</label>
			    <div class="layui-input-block">
			      <input type="text" name="roleName" maxlength="20" lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input" style="width:280px;">
			    </div>
			  </div>
			  <div class="layui-form-item">
			    <label class="layui-form-label">禁改，删的角色</label>
			    <div class="layui-input-block">
			      <input type="text" name="roleCode" maxlength="20" placeholder="填则禁，不填则可改" autocomplete="off" class="layui-input" style="width:280px;">
			    </div>
			  </div>
			  <div class="layui-form-item">
			    <label class="layui-form-label">是否有效</label>
			    <div class="layui-input-block" style="width:200px;">
			      <select name="isva"  lay-verify="required" lay-search="">
			          <option value="0">是</option>
			          <option value="1">否</option>
			        </select>
			    </div>
			  </div>
			  <div class="layui-form-item">
			    <div class="layui-inline">
			      <label class="layui-form-label">角色模块</label>
			      <div style="display: inline-block; width: 270px; height: 100%; padding: 10px; overflow: auto;">
			      	<input type="hidden" id="moduleId" name="moduleIds">
			   		<ul id="moduleTree"></ul>
				  </div>
			    </div>
			  </div>
			  <div class="layui-form-item layui-form-text">
			    <label class="layui-form-label">角色描述</label>
			    <div class="layui-input-block">
			      <textarea placeholder="请输入内容" maxlength="20" name="roleDesc" class="layui-textarea"></textarea>
			    </div>
			  </div>
			  <div class="layui-form-item">
			    <div class="layui-input-block">
			      <input type="submit" class="layui-btn" lay-submit="" lay-filter="roleAdd" value="提交">
			      <button id="closeAdd" type="reset" class="layui-btn layui-btn-primary" >取消</button>
			    </div>
			  </div>
		 </form>
	 </div>
 </div>
 <div id="updateReload">
 		<div id="updateOperation">
		 	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
			  <legend>角色修改列表</legend>
			</fieldset>
			<form class="layui-form" action="../../role/updateRole.action" method="post"  >
			
			  <div class="layui-form-item">
			    <label class="layui-form-label">角色名称</label>
			    <div class="layui-input-block">
			    <input type="hidden" name="roleId" id="roleId" >
			      <input type="text"  maxlength="20" name="roleName" id="roleName" lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input" style="width:280px;">
			    </div>
			  </div>
			  
			  <div class="layui-form-item">
			    <label class="layui-form-label">禁改，删的角色</label>
			    <div class="layui-input-block">
			      <input type="text" name="roleCode" maxlength="20" placeholder="填则禁，不填则可改" autocomplete="off" class="layui-input" style="width:280px;">
			    </div>
			  </div>
			  <div class="layui-form-item">
			    <label class="layui-form-label">是否有效</label>
			    <div class="layui-input-block" style="width:200px;">
			      <select name="isva" id="isva" >
			          <option value="0" >是</option>
			          <option value="1" >否</option>
			        </select>
			    </div>
			  </div>
			  <div class="layui-form-item">
			    <div class="layui-inline">
			      <label class="layui-form-label">角色模块</label>
			      <div style="display: inline-block; width: 270px; height: 100%; padding: 10px; overflow: auto;" >
			      	<input type="hidden" id="moduleIds" name="moduleIds" >
			   		<ul id="updateModuleTree"></ul>
				  </div>
			    </div>
			  </div>
			  <div class="layui-form-item layui-form-text">
			    <label class="layui-form-label">角色描述</label>
			    <div class="layui-input-block">
			      <textarea placeholder="请输入内容"  maxlength="20" name="roleDesc" class="layui-textarea" id="roleDesc"></textarea>
			    </div>
			  </div>
			  <div class="layui-form-item">
			    <div class="layui-input-block">
			      <input type="submit" class="layui-btn"  value="提交">
			      <button id="closeUpdate" type="reset" class="layui-btn layui-btn-primary" >取消</button>
			    </div>
			  </div>
		 </form>
	 </div>
 </div>
<script type="text/html" id="barDemo">
{{# if(d.roleCode=='' || d.roleCode==null){ }}
  <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
{{# } else{}}
<a class="layui-btn layui-btn-disabled layui-btn-xs">修改</a>
  <a class="layui-btn layui-btn-disabled layui-btn-xs">删除</a>
{{# } }}
</script>

<script src="../../js/jquery-3.1.1.min.js"></script>
<script src="../../layui/layui.js"></script>
<script src="../../layui/layui-xtree.js"></script>
<script>

layui.use(['form','laydate', 'laypage', 'layer', 'table', 'upload', 'element','tree'], function(){
  var form = layui.form
  ,laydate = layui.laydate //日期
  ,laypage = layui.laypage //分页
  ,layer = layui.layer //弹层
  ,table = layui.table //表格
  ,upload = layui.upload //上传
  ,element = layui.element; //元素操作
 
  
  //监听Tab切换
  element.on('tab(demo)', function(data){
    layer.msg('切换了：'+ this.innerHTML);
    console.log(data);
  });
  
  //执行一个 table 实例
  table.render({
     elem: '#role'
    ,async: false
    ,height: 474
    ,url: '../../role/roleFindAll.action' //数据接口
    ,page: true //开启分页
    ,method:'post'
    ,cols: [[ //表头
       {field: 'roleName', title: '角色名称', width:120 }
      ,{field: 'roleDesc', title: '角色描述', width:120}
      ,{field: 'isvas', title: '是否有效', width:120}
      ,{field: 'optimes', title: '操作时间', width:240}
      ,{field: 'oper', title: '操作人', width: 170}
      ,{fixed: 'right',title: '操作', width: 165, align:'center', toolbar: '#barDemo'}
    ]]
  	,id: 'testReload'
  });
  
  //监听工具条
  table.on('tool(demo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
    var data = obj.data //获得当前行数据
    ,layEvent = obj.event; //获得 lay-event 对应的值
    if(layEvent === 'del'){
      var id=data.roleId;
      layer.confirm('确认删除？', function(index){
        obj.del(); //删除对应行（tr）的DOM结构
        layer.close(index);
        //使用jquery的ajax方式向后台提交数据
		var url = "../../role/roleRemove.action";
		var data={id:id};
			$.post(url,data,function(data){
				
				if(data=="ok"){
					layer.msg('删除成功', {
						  icon: 1,
						  time: 1000 //1秒关闭（如果不配置，默认是3秒）
						}, function(){
						  
					});
				}
			});
      	});
    } else if(layEvent === 'edit'){
	      var id=data.roleId;
	      
	      $("#roleDesc").val(data.roleDesc);
	      
	      $("#roleName").val(data.roleName);
	      $('#updateReload').css('display','block');
	      $("#roleId").val(data.roleId);
	      $("#isva").find("option[value="+data.roleIsva+"]").attr("selected","selected");
	   	  var url="../../role/moduleTree.action";
	   	  
	  	  var data={id:id};
	  	  $.post(url,data,function(data){
	  		  	var xtree3 = new layuiXtree({
	  		        elem: 'updateModuleTree'                  //必填
	  		        , form: form                    //必填
	  		        , data: data 		//必填
	  		        , isopen: false  //加载完毕后的展开状态，默认值：true
	  		        , ckall: true    //启用全选功能，默认值：false
	  		        , ckallback: function () {	//全选后调用该方法
	  		        	var id="";
	  		        	var arr =xtree3.GetChecked();
	  		        	if(arr.length==0){
	  		        		$("#moduleIds").val("");
	  		        	};
	  		        	for (var i = 0; i < arr.length; i++) {
	  		        		if(i==0){
	  		        			id=arr[i].value;
	  		        		}else{
	  		        			id=id+","+arr[i].value;
	  		        		}
	  		        		
	  		            }
	  		        	$("#moduleIds").val(id);
	  		        } //全选框状态改变后执行的回调函数
	  		        , color: {       //三种图标颜色，独立配色，更改几个都可以
	  		            open: "#EE9A00"        //节点图标打开的颜色
	  		            , close: "#EEC591"     //节点图标关闭的颜色
	  		            , end: "#828282"       //末级节点图标的颜色
	  		        }
	  		        , click: function (data) {  //节点选中状态改变事件监听，全选框有自己的监听事件
	  		            
	  		        	var id="";
	  		        	//获取所有被选中的末节点
	  		        	var arr =xtree3.GetChecked();
	  		        	if(arr.length==0){
	  		        		$("#moduleIds").val("");
	  		        	};
	  		        	//循环遍历id
	  		        	for (var i = 0; i < arr.length; i++) {
	  		        		if(i==0){
	  		        			id=arr[i].value;
	  		        		}else{
	  		        			id=id+","+arr[i].value;
	  		        		}
	  		        		
	  		            }
	  		        	$("#moduleIds").val(id);
	  		        }
	  		 	});
	  	 	 },"json");
	  	layui.form.render();
		}
	});

		//条件查询
		var $ = layui.$;

		$('.demoTable .layui-btn').on('click', function() {
			var demoReload = $('#demoReload');
			//执行重载
			table.reload('testReload', {
				page : {
					curr : 1
				//重新从第 1页开始
				},
				where : {
					roleName : demoReload.val()
				}
			});
		});
		$('#closeAdd').on('click', function() {
			$('#addReload').css('display', 'none');
		});
		$('#closeUpdate').on('click', function() {
			
			$('#updateReload').css('display', 'none');
		});
		
		$('#imgAdd').on('click', function() {
			$('#addReload').css('display', 'block');
			var url = "../../role/moduleTree.action";
			var data = {
				action : 'tree'
			};
			$.post(url, data, function(data) {
				var xtree3 = new layuiXtree({
					elem : 'moduleTree' //必填
					,
					form : form //必填
					,
					data : data //必填
					,
					isopen : false //加载完毕后的展开状态，默认值：true
					,
					ckall : true //启用全选功能，默认值：false
					,
					ckallback : function() { //全选后调用该方法
						var id = "";
						var arr = xtree3.GetChecked();
						if (arr.length == 0) {
							$("#moduleId").val("");
						}
						;
						for (var i = 0; i < arr.length; i++) {
							if (i == 0) {
								id = arr[i].value;
							} else {
								id = id + "," + arr[i].value;
							}

						}
						$("#moduleId").val(id);
					} //全选框状态改变后执行的回调函数
					,
					color : { //三种图标颜色，独立配色，更改几个都可以
						open : "#EE9A00" //节点图标打开的颜色
						,
						close : "#EEC591" //节点图标关闭的颜色
						,
						end : "#828282" //末级节点图标的颜色
					},
					click : function(data) { //节点选中状态改变事件监听，全选框有自己的监听事件

						var id = "";
						//获取所有被选中的末节点
						var arr = xtree3.GetChecked();
						if (arr.length == 0) {
							$("#moduleId").val("");
						}
						;
						//循环遍历id
						for (var i = 0; i < arr.length; i++) {
							if (i == 0) {
								id = arr[i].value;
							} else {
								id = id + "," + arr[i].value;
							}

						}
						$("#moduleId").val(id);
					}
				});
			},"json");
		});

	});
</script>
</body>
</html>